<template>
  <div class="背景">
    <div class="页眉">
    </div>
    <el-row :gutter="16"
            type="flex"
            justify="center">
      <el-col :span="4">
        <!-- <div class="文本框"
             style="height: 800px;">
          <div class="标题">
            富吾财经
          </div>
          <br />
          <el-menu router>
            <el-menu-item index="/">
              <div class="小标题">
                富头条
              </div>
            </el-menu-item>
            <el-menu-item index="/Video">
              <div class="小标题">
                视频
              </div>
            </el-menu-item>
            <el-menu-item index="/Live">
              <div class="小标题">
                直播
              </div>
            </el-menu-item>
            <el-menu-item index="/news">
              <div class="小标题">
                资讯
              </div>
            </el-menu-item>
            <el-menu-item index="/CreationCenter">
              <div class="小标题">
                富吾号
              </div>
            </el-menu-item>
            <el-menu-item index="">
              <a href="http://www.fuwuzhishu.com/"
                 target="_blank">
                <div class="小标题">
                  关于我们
                </div>
              </a>
            </el-menu-item>
          </el-menu>
        </div> -->
        <side-bar>
        </side-bar>

      </el-col>
      <el-col :span="12">
        <div class="文本框">
          <el-row>
            <el-col :span="2">
              <div class="小标题">关注</div>
            </el-col>
            <el-col :span="2">
              <div class="小标题">推荐</div>
            </el-col>
            <el-col :span="2">
              <div class="小标题">热榜</div>
            </el-col>
            <el-col :span="2">
              <div class="小标题">自选</div>
            </el-col>
            <el-col :span="2">
              <div class="小标题">研报</div>
            </el-col>
            <el-col :span="2">
              <div class="小标题">宏观</div>
            </el-col>
            <el-col :span="2">
              <div class="小标题">地产</div>
            </el-col>
            <el-col :span="2">
              <div class="小标题">股票</div>
            </el-col>
            <el-col :span="2">
              <div class="小标题">理财</div>
            </el-col>
            <el-col :span="2">
              <div class="小标题">基金</div>
            </el-col>
            <el-col :span="2">
              <div class="小标题">期货</div>
            </el-col>
          </el-row>
          <el-table :data="articleData"
                    style="width: 100%"
                    :show-header="false">
            <el-table-column>
              <template slot-scope="scope">
                <el-row>
                  <el-col :span="20">
                    <div class="文章标题">{{scope.row.articleTitle}}</div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10"
                          :offset="6">
                    <div class="文本">
                      阅读数{{scope.row.articleReadings}}
                      · 点赞数{{scope.row.articleThumbups}}
                      · 收藏数{{scope.row.articleStars}}
                    </div>
                  </el-col>
                  <el-col :span="4"
                          class="详情">
                    <el-button type="text"
                               style="padding-top: 0px; padding-bottom: 0px;" @click="getArticle(scope.row.idArticle,scope.row.user.idUser)">查看详情</el-button>
                  </el-col>
                  <el-col :span="4"
                          class="关闭">
                    <el-button type="text"
                               style="padding-top: 0px; padding-bottom: 0px;">×</el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>

      <el-col :span="6">

        <right-side-bar>
        </right-side-bar>

      </el-col>
    </el-row>
    <div class="页眉"></div>
  </div>
</template>

<style>
.article-content {
  float: left;
  width: 660px;
  margin: 0;
  padding: 0;
}
.h1 {
  font-size: 34px;
  font-weight: 700;
  line-height: 44px;
  color: #222;
}
.article-meta {
  margin: 12px 0 20px;
  font-size: 13px;
}
.original-tag {
  display: inline-block;
  padding: 2px;
  border: 1px solid #999;
  line-height: 12px;
  margin-right: 6px;
  color: #777;
}
.article-action {
  content: "";
  display: table;
  clear: both;
}
.comment-meta {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #657180;
}
.input-area {
}
.comment-list {
  margin-top: 22px;
  border-top: 1px solid #f2f2f2;
  margin: 0;
  margin-top: 0px;
  padding: 0;
  box-sizing: border-box;
}
.comment-item {
  content: "";
  display: table;
  clear: both;
}
.文章标题 {
  font-weight: bold;
  font-size: 16px;
  font-family: "宋体";
}
/*菜单栏*/
.el-menu {
  border-right: 0 !important;
}
.el-menu {
  margin: 2px;
}

.标题 {
  font-size: 24px;
  text-align: center;
  color: red;
  margin-bottom: 8px;
  margin-top: 8px;
  font-weight: bold;
}

.小标题 {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.加粗 {
  font-weight: bold;
}

.背景 {
  background: #f8f7f7;
}

.页眉 {
  height: 50px;
  background: #ffffff;
}

.文本框 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}

.文本框-灰色 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}

.文本框-灰色-无间距 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
}

.文本框-无间距 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
}

.文本-小 {
  font-size: 12px;
  text-align: left;
}

.文本-小-宽间距 {
  font-size: 12px;
  text-align: left;
  margin-bottom: 5px;
}

.文本 {
  font-size: 14px;
  text-align: left;
}

.文本-中 {
  font-size: 16px;
  text-align: left;
}

.文本-大 {
  font-size: 18px;
  text-align: left;
}

.文本-标题 {
  font-size: 20px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}

.文本-主标题 {
  font-size: 22px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: bold;
}

.文本-巨型 {
  font-size: 26px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}

.居中 {
  text-align: center;
}

.右侧 {
  text-align: right;
}

.卡片 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 8px;
}

.body {
  background: #f8f7f7;
}
.text {
  font-size: 14px;
  text-align: left;
}
.grid-content {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}
.grid-content-2 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
}
.grid-content-carousel {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
}
.text-card {
  font-size: 12px;
  text-align: left;
}
.text-card-big {
  fo、nt-size: 20px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}
.grid-content-card {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 8px;
}

a {
  text-decoration: none;
  color: black;
}
</style>

<script>
import RightSideBar from './RightSideBar.vue';

import SideBar from './SideBar.vue';
export default {
  components: { SideBar, RightSideBar },
  data () {
    RightSideBar
    return {
      isLogin: '',
      search: '',
      nickname: '',
      useravatar: "",
      userarticleandfuheadlinenumbers: "",
      uservideonumbers: "",
      userthumbups: "",
      userfollows: "",
      userfollowers: "",
      activeName: 0,
      articleData:[],
      queryByUserId:{

        idUser: window.sessionStorage.getItem("idUser")
      },
      queryByUserIdAndPage:{
        idUser: window.sessionStorage.getItem("idUser"),
        page:1
      },
    }
  },
  created () {
    this.init()
  },

  methods:{
    getArticle(id,uid){
      this.$router.push("/Article?id="+id+"&uid="+uid);
    },
    toLogin(){
      this.$router.push("/Login");
    },
    logout () {
      window.sessionStorage.removeItem('idUser');
      this.init()
    },

    async getArticleInfo() {
      const {data: res} = await this.$http.get('http://39.102.76.217:8100/article/recommend', {
        params:this.queryByUserIdAndPage
      })
      this.articleData=res.writings
      console.log(res)
    },
    async init(){
      this.getArticleInfo()
      this.$nextTick(function () {
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = "none";
      })
      this.$nextTick(function () {
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = "none";
      })
      const token = window.sessionStorage.getItem("idUser");
      if (!token) {
        this.isLogin = '0';
      }
      else {
        this.isLogin = '1';
        const { data: res } = await this.$http.get('http://39.102.76.217:8082/getuserbasicinfobyid', {
          params: this.queryByUserId
        })
        this.nickname = res.nickname
        this.useravatar = res.useravatar
        this.userarticleandfuheadlinenumbers = res.userarticleandfuheadlinenumbers
        this.uservideonumbers = res.uservideonumbers
        this.userthumbups = res.userthumbups
        this.userfollows = res.userfollows
        this.userfollowers = res.userfollowers

      }
    }
  }

}

</script>
